<template>
  <el-drawer
    :visible.sync="diailogShow"
    :with-header="true"
    size="60%"
    class="top"
    :title="title"
    @close="onClose"
  >
    <el-row :gutter="6" class="middle">
      <el-form
        ref="form"
        :model="quartData"
        :rules="formRules"
        size="medium"
        label-width="100px"
        label-position="top"
      >
        <!-- 所属小区 -->
        <el-col :span="12">
          <el-form-item label="所属小区" prop="community_code" class="big">
            <el-select
              v-model="quartData.community_code"
              placeholder="请选择"
              clearable
              :style="{ width: '80%' }"
              @change="addBuildingChange"
            >
              <el-option
                v-for="(item, index) in selectedAll"
                :key="index.id"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 所属楼栋 -->
        <el-col :span="12">
          <el-form-item label="所属栋数" prop="building_code" class="big">
            <el-select
              v-model="quartData.building_code"
              placeholder="请选择"
              clearable
              :style="{ width: '80%' }"
            >
              <el-option
                v-for="(item, index) in buildingHouse"
                :key="index"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 房产名称 -->
        <el-col :span="12">
          <el-form-item label="房产名称" prop="name" class="big">
            <el-input
              v-model="quartData.name"
              placeholder="请输入"
              clearable
              :style="{ width: '80%' }"
            />
          </el-form-item>
        </el-col>
        <!-- 户主姓名 -->
        <el-col :span="12">
          <el-form-item label="户主姓名" prop="owner_name" class="big">
            <el-input
              v-model="quartData.owner_name"
              placeholder="请输入"
              controls-position="right"
              :style="{ width: '80%' }"
            />
          </el-form-item>
        </el-col>
        <!-- 联系方式 -->
        <el-col :span="12">
          <el-form-item label="联系方式" prop="owner_tel" class="big">
            <el-input
              v-model="quartData.owner_tel"
              placeholder="请输入"
              clearable
              :style="{ width: '80%' }"
            />
          </el-form-item>
        </el-col>
        <!-- 房间数 -->
        <el-col :span="12">
          <el-form-item label="房间数" prop="rooms" class="big">
            <el-input
              v-model="quartData.rooms"
              placeholder="请输入"
              clearable
              :style="{ width: '80%' }"
            />
          </el-form-item>
        </el-col>
        <!-- 单元信息 -->
        <el-col :span="12">
          <el-form-item label="单元信息" prop="unit" class="big">
            <el-input
              v-model.number="quartData.unit"
              type="number"
              placeholder="请输入"
              controls-position="right"
              :min="1"
              :style="{ width: '80%' }"
            />
          </el-form-item>
        </el-col>
        <!-- 楼层信息 -->
        <el-col :span="12">
          <el-form-item label="楼层信息" prop="floor" class="big">
            <el-input
              v-model.number="quartData.floor"
              type="number"
              placeholder="请输入"
              controls-position="right"
              :min="1"
              :style="{ width: '80%' }"
            />
          </el-form-item>
        </el-col>
        <!-- 入住时间 -->
        <el-col :span="12">
          <el-form-item label="入住时间" prop="entry_time" class="big">
            <el-date-picker
              v-model="quartData.entry_time"
              value-format="timestamp"
              type="date"
              placeholder="选择日期"
            />
          </el-form-item>
        </el-col>
        <!-- 房产描述 -->
        <el-col :span="12">
          <el-form-item label="房产描述" prop="desc" class="big">
            <el-input
              v-model="quartData.desc"
              type="textarea"
              placeholder="请输入描述"
              :autosize="{ minRows: 4, maxRows: 4 }"
              :style="{ width: '80%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large" class="button">
            <el-button @click="onClose">取消</el-button>
            <el-button type="primary" @click="submitForm">确定</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </el-drawer>
</template>
<script>
import {
  communityInfo,
  buildingHouse,
  addBuildingHouse,
  updateHouseInfo
} from '@/api/house/house_index'
// import {
//   communityInfo,
//   addHouseInfo,
//   updateHouseInfo
// } from '@/api/house/house_building'
export default {
  name: 'BuildingB',
  components: {},
  props: [],
  data() {
    return {
      list: [],
      diailogShow: false, // 弹框
      quartData: {
        community_code: '', // 获取小区名称
        building_code: '', // 获取小区栋数
        entry_time: '', // 获取入住时间
        desc: '', // 描述
        owner_name: '', // 户主姓名
        owner_tel: '', // 联系方式
        rooms: '', // 房间数
        name: '', // 房产名称
        unit: '', // 单元信息
        floor: '' // 楼层信息
      },
      selectedAll: [], // 下拉框
      buildingHouse: [], // 根据下拉框找栋数
      // 表单验证规则
      formRules: {
        community_code: [
          {
            required: true,
            message: '所属小区编号不可为空且检查类型',
            trigger: 'blur'
          }
        ],
        owner_name: [
          {
            required: true,
            message: '户主姓名不为空且检查类型',
            trigger: 'blur'
          }
        ],
        owner_tel: [
          {
            required: true,
            message: '户主联系方式不为空且检查类型',
            trigger: 'blur'
          }
        ],
        building_code: [
          {
            required: true,
            message: '所属栋数编号不可为空且检查类型',
            trigger: 'blur'
          }
        ],
        name: [
          {
            required: true,
            message: '房产名称不可为空且检查类型',
            trigger: 'blur'
          }
        ],
        floor: [
          {
            required: true,
            message: '楼层信息不为空且检查类型',
            trigger: 'blur'
          }
        ],
        unit: [
          {
            required: true,
            message: '单元信息不为空且检查类型',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    title() {
      return this.quartData.id ? '修改' : '添加'
    }
  },
  watch: {},
  created() {
    this.communityInfo()
  },
  mounted() {},
  methods: {
    // 下拉框
    async communityInfo() {
      const { data } = await communityInfo()
      // console.log('社区', data.data)
      this.selectedAll = data.data
    },
    // 根据下拉框找到楼栋数
    async addBuilding(value) {
      const res = await buildingHouse(value)
      this.buildingHouse = res.data.data
    },
    addBuildingChange(value) {
      this.$set(this.quartData, 'building_code', '')
      this.addBuilding(value)
    },
    // 提交
    async submitForm() {
      //   //  表单校验
      await this.$refs.form.validate()
      // const res = await addBuildingHouse(this.quartData)
      // console.log(res.msg)

      if (this.quartData.id) {
        await updateHouseInfo(this.quartData)
        this.$message.success('修改成功')
      } else {
        const { data } = await addBuildingHouse(this.quartData)
        if (!data.success) {
          this.$notify.error({
            title: '错误提示',
            message: data.msg
          })
        } else {
          this.$message.success('添加成功')
        }
      }
      this.onClose()
      this.$emit('updataList')
    },
    // // 关闭弹窗
    onClose() {
      // 表单重置
      this.quartData = {
        community_code: '', // 获取小区名称
        building_code: '', // 获取小区栋数
        entry_time: '', // 获取入住时间
        desc: '', // 描述
        owner_name: '', // 户主姓名
        owner_tel: '', // 联系方式
        rooms: '', // 房间数
        name: '', // 房产名称
        unit: '', // 单元信息
        floor: '' // 楼层信息
      }
      // 移除表单校验
      this.$refs.form.clearValidate()
      this.diailogShow = false
    }
  }
}
</script>
<style lang='scss' scoped>
// ::v-deep .el-drawer__header {
//  margin-bottom: 0;
//  padding: 20px 20px 20px 80px;
//  border-bottom: 1px solid #f0f0f0;
//  position: relative;
//  .el-drawer__close-btn{
//  position: absolute;
//  left: 20px;
// }
// }
.big {
  margin-left: 30px !important;
}
.top {
  z-index: 9999;
  margin-left: 10px !important;
  font-size: 20px !important;
  font-weight: 700;
  color: #000 !important;
  border-bottom: 1px solid #cfcfcf;
}
.middle{
  border-top: 1px solid #cfcfcf;
  padding-top: 20px;
}
.button {
  text-align: right;
  margin-top: 80px;
  // margin-right: 40px;
  padding-right: 40px;

  border-top: 1px solid #cfcfcf;
  padding-top: 20px;
}
</style>
